<template>
  <div
    class="carousel"
    @mouseover="pauseScroll"
    @mouseleave="resumeScroll"
    @mousedown="startDrag"
    @mouseup="stopDrag"
    @mousemove="drag"
    ref="carousel"
  >
    <div class="carousel-wrapper" ref="carouselWrapper">
      <div class="carousel-content">
        <div v-for="item in images" :key="item.id" class="table-item">
          <img :src="item.imgs" alt="图片" class="table-img" />
          <div class="table-item-box">
            <h4>{{ item.titles }}</h4>
            <p>{{ item.texts }}</p>
          </div>
        </div>
        <!-- 为了实现无缝效果，复制一份相同内容 -->
        <div v-for="item in images" :key="'copy-' + item.id" class="table-item">
          <img :src="item.imgs" alt="图片" class="table-img" />
          <div class="table-item-box">
            <h4>{{ item.titles }}</h4>
            <p>{{ item.texts }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script setup>
import { ref } from "vue";

const images = [
  {
    id: 1,
    imgs: "https://sjpano.oss-cn-hangzhou.aliyuncs.com/Digital%20twin/aaa.png",
    titles: "裸眼3D",
    texts:
      "裸眼3D是一种无需佩觳特殊眼镜或头显设备即可直接观看三维立体影像的技术。它通过光学、显示技术和视觉算法的结合，使观众在裸眼状态下感受到立体感和沉漫感。随着显示技术、计算能力和内容创作的进步，裸眼3D技术逐渐成熟，并在多个领域展现出广泛的应用潜力。",
  },
  {
    id: 2,
    imgs: "https://sjpano.oss-cn-hangzhou.aliyuncs.com/Digital%20twin/bbb.png",
    titles: "模拟驾驶",
    texts:
      "模拟驾驶通过虚拟现实、物理仿真和人工智能等技术，为车辆与飞行器的驾驶培训、研发、安全研究以及娱乐等领域提供高效、安全的解决方案；随着技术的广泛应用，模拟驾驶将在沉浸感、安全、成本方面效益突出，成为未来交通和低空经济领域的重要应用方向，同时也为自动驾驶训练和数据采集、路径规划提供数据模拟基础。",
  },
  {
    id: 3,
    imgs: "https://sjpano.oss-cn-hangzhou.aliyuncs.com/Digital%20twin/ccc.png",
    titles: "XR大空间",
    texts:
      "XR大空间是一种利用扩展现实（XR）技术创建的沉浸式空间体验，它允许用户在线下环境中通过穿戴XR设备进行沉浸式内容体验。这种体验通常涉及用户按照预设的动线行走，从而在真实世界中融入虚拟元素，提供一种全新的超实景的互动体验。",
  },
  {
    id: 4,
    imgs: "https://sjpano.oss-cn-hangzhou.aliyuncs.com/Digital%20twin/ddd.png",
    titles: "工业4.0",
    texts:
      "工业4.0（Industry 4.0）旨在通过智能化、数字化和网络化技术推动制造业的全面升级。其核心是将物理生产系统与数字技术深度融合，构建高度灵活、个性化和高效的智能制造模式。主要涵盖智能工厂、智能生产和智能物流，具备互联、数据化、集成化、个性化定制等核心特征；其中3D打印应用更是突飞猛进，已经逐步形成了完成的产业链条。",
  },
  {
    id: 5,
    imgs: "https://sjpano.oss-cn-hangzhou.aliyuncs.com/Digital%20twin/eee.png",
    titles: "数字孪生编辑系统",
    texts:
      "数字孪生是通过数据建模与实时同步技术，在虚拟空间中构建物理实体的动态数字化镜像。其核心在于“虚实交互”；数字孪生编辑系统是助力企业数字化转型的创新实用工具，其特色在于图像化立体展示信息，可定制数据交互，具备低代码、易上手的优点，有图形化界面和图层式创作方式，用户无需复杂编程即可搭建可视化系统。",
  },
];

const carouselWrapper = ref(null);
const carousel = ref(null);
let isDragging = false;
let startX = 0;
let scrollLeft = 0;

// 暂停滚动
const pauseScroll = () => {
  carouselWrapper.value.style.animationPlayState = "paused";
};

// 恢复滚动
const resumeScroll = () => {
  carouselWrapper.value.style.animationPlayState = "running";
};

// 拖动开始
const startDrag = (e) => {
  isDragging = true;
  startX = e.pageX - carousel.value.offsetLeft;
  scrollLeft = carouselWrapper.value.scrollLeft;
};

// 停止拖动
const stopDrag = () => {
  isDragging = false;
};

// 拖动过程中
const drag = (e) => {
  if (!isDragging) return;
  e.preventDefault();
  const x = e.pageX - carousel.value.offsetLeft;
  const walk = (x - startX) * 2; // 加快拖动速度
  carouselWrapper.value.scrollLeft = scrollLeft - walk;
};
</script>
  
  <style scoped>
.carousel {
  width: 100%;
  height: 270px;
  display: flex;
  overflow: hidden; /* 隐藏滚动区域之外的内容 */
  /* cursor: grab; */
}

.carousel-wrapper {
  display: flex;
  animation: scroll 30s linear infinite; /* 动画效果：15秒完成一轮滚动 */
  align-items: center;
}

.carousel-content {
  display: flex;
  flex-wrap: nowrap;
}

.table-item {
  display: flex;
  width: 520px;
  margin-left: 30px;
  overflow: hidden;
  cursor: pointer; /* 鼠标悬停时显示小手 */
}

.table-item h4 {
  text-align: center;
  line-height: 35px;
}

.table-item > img {
  height: 200px;
  width: 400px;
  border-radius: 15px 0px 0px 15px;
}

.table-item > .table-item-box {
  height: 198px;
  width: 500px;
  background: #2c9bff;
  color: #fff;
  margin: 1px;
  padding-left: 10px;
  border-radius: 0px 15px 15px 0px;
}

.table-item > .table-item-box > p {
  font-size: 11px;
  padding-right: 10px;
  line-height: 20px;
}

@keyframes scroll {
  0% {
    transform: translateX(0); /* 开始位置 */
  }
  100% {
    transform: translateX(-50%); /* 滚动结束位置 */
  }
}

.carousel:active {
  cursor: grabbing;
}
</style>